Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure [hidden] works as expected #4873

Merged
merged 1 commit into from
Jul 2, 2021
Merged

Ensure [hidden] works as expected #4873

merged 1 commit into from
Jul 2, 2021

Conversation

adamwathan
Copy link
Member

Resolves #4872.

This PR makes sure that the expected behavior of the [hidden] attribute is preserved even on elements where we override the default display value, like images, videos, iframes, etc.

@adamwathan adamwathan merged commit a323030 into master Jul 2, 2021
@adamwathan adamwathan deleted the fix-hidden branch July 2, 2021 13:14
@andresgutgon
Copy link

andresgutgon commented Dec 7, 2021

Hi, I have said this before and say it again. AWESOME project. I love it. I'm a customer xD

Ok let's go to my issue 😅

Is this the expected behavior?
image

So I see [hidden] style applied but if I have a display class like .flex it's overwritten.

I can fix on my part easily like this:

.hidden-attribute[hidden] {
  @apply hidden;
}

But I love Tailwind and I hate write CSS

@andresgutgon
Copy link

andresgutgon commented Dec 7, 2021

I guess this could be a variant like this?

const FancyReactComponent = ({ hidden }) => {return (<div className="flex:not([hidden])" hidden={hidden}>I'm hidden now</div>
}

I know I could do this with CSS classes. But in my use case I don't control the React component, just the CSS so the react component use hidden attribute

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[hidden] attribute ignored on certain elements
2 participants